<template>
  <!-- 送货单详情 -->
  <div>
    <div class="header-fixed">
      <Header :text="text"/>
    </div>
    <div class="content">
      <div class="content-top">
        <div>
          <span><span class="text">{{$t('cImport.iNote')}}: </span>{{handObj.delivererNumber}}</span>
          <span><span class="text">{{$t('cImport.iPeople')}}: </span>{{handObj.deliverer}}</span>
        </div>
        <div>
          <span><span class="text">{{$t('cImport.iDelivereDate')}}: </span>{{handObj.deliveryDate | changeDate}}</span>
          <span><span class="text">{{$t('cExport.company')}}: </span>{{handObj.purchasers}}</span>
        </div>
        <div>
          <span><span class="text">{{$t('cImport.iRoom')}}: </span>{{handObj.storageRoom}}</span>
          <span><span class="text">{{$t('cImport.iTotal')}}: </span>{{handObj.totaldeliverer}}</span>
        </div>
        <div>
          <span><span class="text">{{$t('cExport.allBox')}}: </span>{{handObj.totalBoxes}}</span>
          <span><span class="text">{{$t('cExport.allGross')}}: </span>{{handObj.totalBoxWeight}}</span>
        </div>
      </div>
      <div class="content-bottom">
        <el-collapse v-model="activeNames" v-if="handObj.queryList && handObj.queryList.length !== 0">
          <el-collapse-item :name="index" v-for="(item,index) in handObj.queryList" :key="index">
            <template slot="title">
              <div class="itemText">
                <div>{{$t('cImport.iNumbers')}}: {{item.mainWaybillNumber}}{{item.waybillNumber ? '_'+item.waybillNumber : ''}}</div>
                <div style="padding-top: 2px">
                  <span style="padding-right: 20px">{{$t('cExport.allBox')}}: {{item.boxes}}</span>
                  <span>{{$t('cImport.iWeight')}}: {{item.grossWeight}}</span>
                </div>
              </div>
            </template>
            <div v-if="handObj.queryList && item.detilsList.length !== 0">
              <div class="boxContent" v-for="(item1,index1) in item.detilsList" :key="index1">
              <div>
                <span>{{$t('cImport.iContract')}}: {{item1.contractNo}}</span>
                <span>{{$t('cArroval.aog')}}:
                  <span style="color: red" v-if="item1.aog === 'AOG'">AOG</span>
                  <span v-else>{{$t('m.mNo')}}AOG</span>
                </span>
              </div>
              <div>
                <span>{{$t('cExport.contarctType')}}: {{item1.contarctType}}</span>
                <span>{{$t('cImport.iRepair')}}: {{item1.purchaser}}</span>
              </div>
              <div>
                <span>{{$t('cTransportSearch.partNum')}}: {{item1.partNumber}}</span>
                <span>{{$t('cTransportSearch.serialNum')}}: {{item1.serialNumber}}</span>
              </div>
              <div>
                <span>{{$t('cExport.purchasingClerk')}}: {{item1.purchasingClerk}}</span>
                <span>{{$t('cTransportSearch.itemName')}}: {{item1.engCargoName}}</span>
              </div>
              <div>
                <span>{{$t('cExport.boxes')}}: {{item1.boxess}}</span>
              </div>
            </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="footer-fixed">
      <el-button type="primary" @click="handleOk">{{$t('btn.warehousing')}}</el-button>
    </div>
  </div>
</template>

<script>
import Header from '../../../components/common/Header'
import { $import } from "@/api/import"

export default {
  name: '',
  // 组件属性、变量
  props: {},
  // 变量
  data() {
    return {
      text: '',
      handObj: {},
      activeNames: ['1','2'],
      delivererNumber: ''
    }
  },
  computed: {},
  // 使用其他组件
  components: {
    Header
  },
  // 方法
  methods: {
    // 确认入库
    handleOk() {
      const arr = []
      arr.push(this.handObj.delivererNumber)
      const obj = {
        ids: [this.handObj.wid],
        number: arr
      }
      $import.savePutStorage(obj)
             .then(res => {
               this.$msg.hideLoading()
               if (res.status === 200) {
                 this.$msg.success(res.msg || res.message || '入库成功!')
                 this.$router.go(-1)
               }
               else {
                 this.$msg.fail(res.msg || res.message || '网络错误,请稍后再试!')
               }
             })
             .catch(err => {
               this.$msg.fail(err.msg || err.message || '网络错误,请稍后再试!')
             })
    }
  },
  // 生命周期函数
  created() {
    this.text = this.$route.query.type
    this.handObj = this.$route.query.handObj
  }
}
</script>

<style scoped>
.content {
  position: relative;
  top: 21.333vw;
  left: 0;
  width: 100%;
  padding: 0 10px;
  font-size: 3.889vw;
  margin-bottom: 58px;
}
.text {
  font-weight: bold;
}
.content-top {
  padding-bottom: 5px;
  border-bottom: 1px dashed #c0c0c0;
}
.content-top div {
  display: flex;
}
.content-top div span {
  flex: 1;
}
/* 改变折叠文字 */
/deep/.el-collapse-item__header {
  font-size: 4vw !important;
  line-height: 1;
  font-weight: bold;
}
/deep/.el-collapse-item__content {
  font-size: 3.889vw !important;
  padding-bottom: 10px !important;
}
/* 单号详情 */
.boxContent:not(:last-child) {
  border-bottom: 1px solid black;
}
.boxContent div {
  display: flex;
}
.boxContent div span {
  flex: 1;
}
/* 底部按钮 */
.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  background-color: #fff;
}
</style>
